<template>
  <div class="recharge">
    <navBar title="我的钱包" />

    <!-- 总资产 -->
    <van-grid :column-num="3" :border="false">
      <van-grid-item :text="'' + isBalance?.nowMoney">
        <template #icon>
          总资产（元）
        </template>
      </van-grid-item>
      <van-grid-item :text="'' + isBalance?.recharge">
        <template #icon>
          累计充值(元)
        </template>
      </van-grid-item>
      <van-grid-item :text="'' + isBalance?.orderStatusSum">
        <template #icon>
          累计消费(元)
        </template>
      </van-grid-item>
    </van-grid>

    <!-- 充值方案 -->
    <van-cell-group>
      <van-cell
      v-for="item in rechargeList" :key="item.id"
      icon="shop-o" :title="'充值￥' + item.value?.price + '赠送' + item.value?.give_price">
        <template >
          <van-button
          type="danger" :disabled="state"
          :loading="state" size="mini"
          @click="rechargeTest(item.id)"
          round >充值</van-button>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { balance } from '@/api/user'
import {
  recharge,
  rechargeTest,
} from '@/api/user/recharge'

export default {
  data() {
    return {
      isBalance: null, // 总资产
      rechargeList: [], // 充值方案
      state: false, // 充值状态
    }
  },
  created() {
    this.balance()
    this.recharge()
  },
  methods: {
    // 获取用户资产统计
    async balance() {
      const { data } = await balance()
      this.isBalance = data || null
    },

    // 获取钱包充值方案
    async recharge() {
      const { data } = await recharge()
      // console.log(data);
      this.rechargeList = data.rechargePriceWays || []
    },

    // 充值
    async rechargeTest(id) {
      if(this.state) return
      this.state = true
      const res = await rechargeTest({ rechar_id: id })
      setTimeout(() => {
        this.state = false
        this.balance()
        if(res.status === 200) return this.$toast.success(res.data)
        this.$toast.fail(res.msg)
      }, 1000)
    }
  },
}
</script>
<style lang="scss" scoped>
.recharge {
  text-align: left;
  .van-grid {
    margin: 10px 10px;
    border-radius: 10px;
    overflow: hidden;
    color: #cfb26e;
  }
  .van-cell-group {
    margin: 20px 10px;
    .van-button {
      width: 60px;
    }
  }
}
</style>
<style scoped>
.recharge >>> .van-grid-item__content--center {
  background-color: #000000;
}
.recharge >>> .van-grid-item__text {
  text-align: center;
  color: #cfb26e;
  line-height: 0;
  margin-top: 8px;
}
.recharge >>> .van-grid-item__icon-wrapper {
  margin-bottom: 16px;
  line-height: 0;
}
</style>